<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CPU参数</span>
            <el-button
              style="float: right;padding-right: 10px;"
              icon="el-icon-refresh-right"
              size="mini"
              circle
              @click="handlerServer"
            />
          </div>
          <div class="text item">
            <table v-if="server.cpu" class="tb-table">
              <tr>
                <td class="tb-title" width="30%">核心数:</td>
                <td colspan="3">
                  {{ this.server.cpu.cpuNum }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">用户使用率:</td>
                <td colspan="3">
                  {{ this.server.cpu.used + '%' }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">系统使用率:</td>
                <td colspan="3">
                  {{ this.server.cpu.sys + '%' }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">当前空闲率:</td>
                <td colspan="3">
                  {{ this.server.cpu.free + '%' }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>JVM参数</span>
            <el-button
              style="float: right;padding-right: 10px;"
              icon="el-icon-refresh-right"
              size="mini"
              circle
              @click="handlerServer"
            />
          </div>
          <div class="text item">
            <table v-if="server.jvm" class="tb-table">
              <tr>
                <td class="tb-title" width="30%">Jvm参数:</td>
                <td colspan="3">
                  {{ this.server.jvm.name }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">启动时间:</td>
                <td colspan="3">
                  {{ this.server.jvm.startTime }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">运行时间:</td>
                <td colspan="3">
                  {{ this.server.jvm.runTime }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">使用内存:</td>
                <td colspan="3">
                  {{ this.server.jvm.used + ' M' }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内存参数</span>
            <el-button
              style="float: right;padding-right: 10px;"
              icon="el-icon-refresh-right"
              size="mini"
              circle
              @click="handlerServer"
            />
          </div>
          <div class="text item">
            <table v-if="server.cpu" class="tb-table">
              <tr>
                <td class="tb-title" width="30%">总内存:</td>
                <td colspan="3">
                  {{ this.server.mem.total + 'G' }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">已用内存:</td>
                <td colspan="3">
                  {{ this.server.mem.used + 'G' }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">剩余内存:</td>
                <td colspan="3">
                  {{ this.server.mem.free + 'G' }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">使用率:</td>
                <td colspan="3">
                  {{ this.server.mem.usage + '%' }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统参数</span>
            <el-button
              style="float: right;padding-right: 10px;"
              icon="el-icon-refresh-right"
              size="mini"
              circle
              @click="handlerServer"
            />
          </div>
          <div class="text item">
            <table v-if="server.sys" class="tb-table">
              <tr>
                <td class="tb-title" width="30%">服务器名称:</td>
                <td colspan="3">
                  {{ this.server.sys.computerName }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">操作系统:</td>
                <td colspan="3">
                  {{ this.server.sys.osName }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">服务器IP:</td>
                <td colspan="3">
                  {{ this.server.sys.computerIp }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="30%">系统架构:</td>
                <td colspan="3">
                  {{ this.server.sys.osArch }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据库参数</span>
            <el-button
              style="float: right;padding-right: 10px;"
              icon="el-icon-refresh-right"
              size="mini"
              circle
              @click="handlerServer"
            />
          </div>
          <div class="text item">
            <table v-if="server.sys" class="tb-table">
              <tr>
                <td class="tb-title" width="20%">数据库名称:</td>
                <td colspan="3">
                  {{ this.server.mysql.name }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="20%">类型:</td>
                <td colspan="3">
                  {{ this.server.mysql.type }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="20%">驱动加载类:</td>
                <td colspan="3">
                  {{ this.server.mysql.driverClassName }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="20%">链接地址:</td>
                <td colspan="3">
                  {{ this.server.mysql.url }}
                </td>
              </tr>
              <tr>
                <td class="tb-title" width="20%">版本:</td>
                <td width="30%">
                  {{ this.server.mysql.version }}
                </td>
                <td class="tb-title" width="20%">最大连接数:</td>
                <td width="30%">
                  {{ this.server.mysql.activeCount }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getServer } from '@/api/sysMonitor'

export default {
  data() {
    return {
      server: {
        cpu: '',
        mem: '',
        jvm: '',
        sys: '',
        file: '',
        mysql: ''
      }
    }
  },
  mounted() {
    this.handlerServer()
  },
  methods: {
    handlerServer() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getServer().then(res => {
        if (res.code === 20000) {
          loading.close()
          this.server = res.data
        }
      })
    }
  }
}
</script>

<style scoped>

.app-container {
  padding: 10px 10px;
}

.el-col {
  margin-top: 10px;
}

.text {
  font-size: 14px;
}

.box-card {
  min-height: 260px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

/deep/ .el-card__header {
  padding: 10px 10px;
}

.el-button--mini.is-circle {
  padding: 0px !important;
}
</style>
